//引入 面包屑 ->Breadcrumb  按钮 -> Button
import { Breadcrumb, Button, message, Table, Tag, Modal } from 'antd';

//引入生命周期函数 ->useEffect  引入数据 -->useState
import { useEffect, useState, lazy, useRef } from "react";
//引入列表接口 ->menulist  删除->menudelete
import { menulist, menudelete } from "../../request/api";
import { ExclamationCircleOutlined } from '@ant-design/icons';



//引入css样式
import "../../assets/css/menu_index.css";

//引入dialog弹窗
const Dialog = lazy(() => import('./dialog'));


export default function Index() {
    //设置表格初始数据
    let [menuData, changeMenu] = useState([]);
    //设置Dialog是否显示
    let [isShow, setIsShow] = useState(false);
    //设置一个是编辑还是添加
    let [isAdd, setAdd] = useState(true);
    //设置子组件ref
    const ref = useRef();
    //设置删除弹窗
    const [modal, contextHolder] = Modal.useModal();
    //设置表格 列的配置项
    const columns = [
        {
            title: '菜单编号',
            dataIndex: 'id'
        },
        {
            title: '菜单名称',
            dataIndex: 'title'
        },
        {
            title: '上级菜单',
            dataIndex: 'pid'
        }, {
            title: '菜单图标',
            dataIndex: 'icon'

        }, {
            title: '菜单地址',
            dataIndex: 'url'
        }, {
            title: '状态',
            dataIndex: 'status',
            render: (_, { status }) => (
                <>
                    {status == 1 ? <Tag className='tab_tag' color="#87d068">正常</Tag> : <Tag className='tab_tag' color="warning">禁用</Tag>}
                </>
            )

        }, {
            title: '操作',
            render: (_, item) => (
                <>
                    <Button size='middle' className='tab_btn' htmlType='button' onClick={() => edit(item.id)} ghost type="primary">编辑</Button>
                    <Button size='middle' className='tab_btn' danger onClick={() => del(item.id)}>删除</Button>
                </>
            )

        }
    ];


    //在挂载完成时请求数据
    useEffect(() => {
       getData();
    }, []);

    //点击添加按钮事件
    const openDialog = () => {
        setIsShow(true);//打开弹窗
        setAdd(true);//设置为添加模式
    };

    //定义 子组件通过这个方法传递参数
    const getShow = (e) => {
        setIsShow(e);
    };

    //点击编辑事件
    const edit = (id) => {
        ref.current.lookup(id);
        //打开弹窗
        setIsShow(true);
        //设置为false 显示为编辑
        setAdd(false);
    }

    // 封装一个获取数据的方法
    const getData = () => {
        //请求菜单数据
        menulist().then(res => {
            if (res.code == 200) {
                // 处理表单需要的key值
                res.list.forEach(item => {
                    //处理二层数组里面的key值
                    if (item.children) {
                        item.children.forEach(val => {
                            val.key = new Date().getTime() + Math.random() * 3.14 + Math.random() * 3.14;
                        });
                    }
                    item.key = new Date().getTime() + Math.random() * 3.14;
                })
                //设置数据
                changeMenu(res.list);
            } else {
                message.error(res.msg);
            }
        });
    };

    //点击删除
    const del = (id) => {
        modal.confirm({
            title: '删除提示',
            icon: <ExclamationCircleOutlined />,
            content: '您确定要删除吗？',
            okText: '确认',
            cancelText: '取消',
            onCancel: () => { message.info({ content: "已取消删除", duration: 1 }) },
            onOk: () => {
                menudelete({ id }).then(res => {
                    //判断是否删除成功
                    if (res.code == 200) {
                        //成功提示
                        message.success(res.msg);
                        //重新获取数据
                        getData()
                    } else {
                        //失败提示
                        message.error(res.msg);
                    }
                })
            }
        });

    };




    return (<div id='menu'>
        {/* 面包屑导航 */}
        <Breadcrumb className='Bread'>
            <Breadcrumb.Item ><a href="/home">首页</a></Breadcrumb.Item>
            <Breadcrumb.Item>菜单管理</Breadcrumb.Item>
        </Breadcrumb>

        {/* 点击添加按钮 */}
        <Button type="primary" className='addBtn' onClick={openDialog}>添加</Button>

        {/* 表格主体 */}
        <Table
            columns={columns}//数据规则
            pagination={false}//不使用分页
            dataSource={menuData}//表格数据
        />
        {contextHolder}

        {/* dialog弹窗 */}
        <Dialog ref={ref} isAdd={isAdd} menuData={menuData} isShow={isShow} getShow={getShow} getData={getData} ></Dialog>
    </div>)
}